<template>
	<el-drawer :title="titleMap[mode]" v-model="visible" :size="1400" destroy-on-close @closed="$emit('closed')">
		<el-container>
			<el-header>
				<div class="left-panel">
					<div class="right-panel-search">
						<el-input v-model="search.keyword" placeholder="名称" clearable></el-input>
						<el-button type="primary" icon="el-icon-search" @click="upsearch">查询</el-button>
					</div>
				</div>
				<div class="right-panel">
					<div class="right-panel-search">

					</div>
				</div>
			</el-header>
			<el-main>
				<scTable ref="table" :params="params" :apiObj="$API.system.custGroup.preview" stripe remoteSort
					remoteFilter>
					<el-table-column label="客户主键" prop="H_Id" width="200" />
					<el-table-column label="卡号" prop="ctm_code" width="120" />
					<el-table-column align="left" label="姓名/性别" prop="ctm_name" width="200">
						<template #default="scope">
							<el-button link size="default" class="selectable-btn">
								<el-icon v-if="scope.row.ctm_sex=='M'" class="el-icon--right" color="#409EFF">
									<Male />
								</el-icon>
								<el-icon v-if="scope.row.ctm_sex=='W'" class="el-icon--right" color="#F56C6C">
									<Female />
								</el-icon>
								&nbsp;
								{{scope.row.ctm_name}}
							</el-button>
						</template>
					</el-table-column>
					<el-table-column align="center" label="年龄" prop="ctm_age" width="90" />
					<el-table-column label="分群" prop="ctm_tag" width="200" />
					<el-table-column label="建档时间" prop="H_CreateTime" />
				</scTable>
			</el-main>
		</el-container>
	</el-drawer>
</template>

<script>
	var _this;

	import {
		defineAsyncComponent
	} from 'vue';
	const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));

	export default {
		emits: ['success', 'closed'],
		components: {
			scEditor
		},
		data() {
			return {
				search: {
					keyword: "",
				},
				mode: "add",
				titleMap: {
					add: '添加分群',
					edit: '编辑分群',
					preview: "分群预览",
				},
				params: {

				},
				visible: false
			}
		},
		mounted() {
			_this = this;
		},
		methods: {
			upsearch() {
				this.$refs.table.upData(this.search)
			},
			//显示
			open(data) {
				if (data) {
					this.mode = data;
				}
				this.visible = false;
				this.$nextTick(() => {

				})
				return this;
			},
			//表单注入数据
			setData(data) {
				this.params = {
					id: data.id
				};
				this.visible = true;
				this.$nextTick(() => {

				})
			}
		}
	}
</script>

<style>

</style>
